<script lang="ts" setup name="CallbackPatch">
import { XtxMessage } from '@/components/message/message';
import userStore from '@/store';
import { useCount } from '@/utils/hooks';
import { accountRules, codeRules, mobailRules, passwordRules, rePasswordRule } from '@/utils/validate';
import { useField, useForm } from 'vee-validate';
import { useRouter } from 'vue-router';
let opendId = ''
if (QC.login.chack()) {
  // 获取openId
  QC.login.getMe((id) => {
    opendId = id
  })
}
const { users } = userStore()
const router = useRouter()
const { validate } = useForm({
  validationSchema:{
    account:accountRules,
    mobile:mobailRules,
    code:codeRules,
    password:passwordRules,
    repassword:rePasswordRule
  }

})
const { time,start} = useCount(59)
const {value:mobile,errorMessage:mobileMessage,validate:validateMobail} = useField<string>('mobile')
const {value:account,errorMessage:accountMessage} = useField<string>('account')
const {value:code,errorMessage:codeMessage} = useField<string>('code')
const {value:password,errorMessage:passwordMessage} = useField<string>('password')
const {value:repassword,errorMessage:repasswordMessage} = useField<string>('repassword')
const send= async()=>{
  if (time.value > 0) return
  // console.log('获取验证码')
  // 单独校验手机号
  const res = await validateMobail()
  if (!res.valid) {
    return
  }
  await users.sendQQPathMsg(mobile.value)
  XtxMessage.success('获取验证码成功')

  start()
}
const bind = async()=>{
const res = await validate()
  if(!res.valid)return
  await users.qqPatchLogin({unionId:opendId, mobile:mobile.value, code:code.value})
  XtxMessage.success('QQ绑定成功')
  router.push('/')
}
</script>
<template>
  <div class="xtx-form">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <input v-model="account" class="input" type="text" placeholder="请输入用户名" />
      </div>
      <div class="error"></div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <input v-model="mobile" class="input" type="text" placeholder="请输入手机号" />
      </div>
      <div class="error"></div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <input v-model="code" class="input" type="text" placeholder="请输入验证码" />
        <span class="code" @click="send">{{ time === 0 ? '发送验证码' : `${time}s后发送` }}</span>
      </div>
      <div class="error"></div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input v-model="password" class="input" type="password" placeholder="请输入密码" />
      </div>
      <div class="error"></div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input v-model="repassword" class="input" type="password" placeholder="请确认密码" />
      </div>
      <div class="error"></div>
    </div>
    <a href="javascript:;" class="submit" @click="bind">立即提交</a>
  </div>
</template>

<style scoped lang="less">
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>